<template>
  <el-dialog
    :title="$t('email.selectEmailTemplate')"
    :close-on-click-modal="false"
    :visible.sync="show"
    :append-to-body="true"
    @open="getInit"
    :before-colse="handleClose"
    top="5vh"
    width="75%"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('email.myTemplate')" name="first">
        <el-scrollbar
          :wrap-class="{ wrapClass: true }"
          class="dialog-scrollbar"
        >
          <div
            v-for="item in templateOptions"
            :key="item.key"
            style="text-align: center; display: inline-block"
          >
            <el-radio
              border
              v-model="templateRadio"
              :label="item.key"
              style="
                width: 220px;
                height: 220px;
                margin: 10px 5px;
                padding: 10px;
              "
            >
              <el-card class="box-card">
                <template v-if="item.imageURL">
                  <img
                    :src="item.imageURL"
                    style="width: 150px; height: 100px"
                    alt=""
                  />
                </template>
                <template v-else>
                  <img
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                    style="width: 150px; height: 100px"
                    alt=""
                  />
                </template>
              </el-card>
              <p style="text-align: center">
                <!-- <el-popover
                  placement="top-start"
                  width="200"
                  trigger="click"
                  :content="item.displayName"
                  ref="popover-title"/>
                <template v-popover:popover-title> -->
                {{ getTitle(item.displayName) }}
                <!-- </template> -->
                <el-button
                  @click="preview(item)"
                  :key="item.key"
                  type="success"
                  size="mini"
                  style="float: right; margin-top: -7px"
                  icon="el-icon-view"
                  circle
                ></el-button>
                <el-image-viewer
                  v-if="showViewer"
                  :on-close="
                    () => {
                      showViewer = false
                    }
                  "
                  :url-list="urlList"
                />
              </p>
            </el-radio>
          </div>
        </el-scrollbar>
      </el-tab-pane>
      <!-- <el-tab-pane label="系统模板" name="second">系统模板</el-tab-pane>
      <el-tab-pane label="分享给我的" name="second1">分享给我的</el-tab-pane> -->
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">{{ $t('common.cancel') }}</el-button>
      <el-button type="success" plain @click="handleSubmit">{{
        $t('permission.confirm')
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getAction } from '@/api/common'
import storage from '@/utils/storage'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'SelectTemplate',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    elImageViewer,
  },
  data() {
    return {
      templateRadio: null,
      templateOptions: [],
      activeName: 'first',
      showViewer: false,
      urlList: [],
    }
  },
  watch: {
    show(val) {
      this.$emit('update:show', val)
    },
  },
  mounted() {
    console.log('mounted')
  },
  created() {
    console.log('created')
  },
  methods: {
    handleClose() {
      this.$emit('update:show', false)
    },
    getInit() {
      getAction({}, 'EmailTemplate/SelectTemplateList').then((res) => {
        this.templateOptions = res.data.templateOptions
        this.templateOptions.forEach((item, index) => {
          this.templateOptions[index].imageURL = this.getCacheImage(item.key)
        })
      })
    },
    getCacheImage(id) {
      const keyName = 'crm_email_template_id_' + id
      return storage.get(keyName)
    },
    handleSubmit() {
      if (this.templateRadio != null) {
        getAction(
          {},
          'EmailTemplate/GetFieldsById?id=' + this.templateRadio
        ).then((res) => {
          this.$emit('updateTemplate', res.data.templateContent)
          this.$emit('update:show', false)
        })
      } else {
        this.$message({
          message: '请选择模板后提交',
          type: 'warning',
        })
      }
    },
    getTitle(str) {
      if (str.length > 18) {
        return str.substr(0, 15) + '...'
      } else {
        return str
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleChange(value) {
      console.log(value)
    },
    preview(item) {
      this.showViewer = true
      if (item.imageURL) {
        this.urlList = [item.imageURL]
      } else {
        this.urlList = [
          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        ]
      }
    },
  },
}
</script>

<style scoped>
.dialog-scrollbar {
  height: 590px;
}
</style>
